<!doctype html>
<html>
    <head>
        <title>市民随手拍</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" />
        <meta name="renderer" content="webkit" />

        <link rel="stylesheet" href="http://zfj.city1000.cn/static/layuiadmin/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="http://zfj.city1000.cn/static/layuiadmin/style/admin_layui.css" media="all">
        <link rel="stylesheet" href="http://zfj.city1000.cn/static/css/Task.css?v=16" media="all">
        <script src="http://zfj.city1000.cn/static/js/jquery.1.12.4.js"></script>
        <script src="http://zfj.city1000.cn/static/js/jquery.cookie.js"></script>
        <script src="http://zfj.city1000.cn/static/js/plugins.js?v=3"></script>
        <script src="http://zfj.city1000.cn/static/layuiadmin/layui/layui.js"></script>
        <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
        <script>
            function h5Img (imgObj) {
              var imgs = [];
              for(var i=0; i<imgObj.length; i++){
                  imgs.push(imgObj.eq(i).attr('src'));
                  imgObj.eq(i).click(function(){
                      var nowImgurl = $(this).attr('src');
                      WeixinJSBridge.invoke("imagePreview",{
                          "urls":imgs,
                          "current":nowImgurl
                      });
                  });
              }
            }
            $(function(){
                var imgObj = $(".tupian");
                h5Img(imgObj);
            });
        </script>
    </head>
    <body>
        <div class="tongyong">
            <div class="top_box">
                <div class="logo">
                    <img src="http://zfj.city1000.cn/static/images/logo.png" />
                </div>
                <div class="title">安平县城市管理综合行政执法局</div>
            </div>
            <div class="task_member_box">
                <form action="http://zfj.city1000.cn/wx/h5/shimin/post/create" method="POST" enctype="multipart/form-data">
                <!--form start-->
                <input type="hidden" value="" name="openid" />

                <dl style="display: none;">
                    <dt>
                        <img src="http://zfj.city1000.cn/static/images/caiji/2.png" width="24" />
                        <span>
                            来源<strong>*</strong>
                        </span>
                    </dt>
                    <dd>
                        <input type="text" name="source" placeholder="请输入案件来源" value="市民通过公众号提交" class="input1" />
                    </dd>
                </dl>
                
                
                <dl>
                    <dt>
                        <img src="http://zfj.city1000.cn/static/images/caiji/4.png" width="24" />
                        <span>
                            详细地址<strong>*</strong>
                        </span>
                        <span class="layui-btn layui-btn-xs layui-btn-normal" id="auto_dizhi" style="margin-left: 10px;">点击获取</span>
                    </dt>
                    <dd>
                        <input type="text" name="dizhi" placeholder="请输入详细地址" id="dizhi" class="input1" />
                    </dd>
                </dl>
                
                <dl>
                    <dt>
                        <img src="http://zfj.city1000.cn/static/images/caiji/6.png" width="24" />
                        <span>
                            类型<strong>*</strong>
                        </span>
                    </dt>
                    <dd>
                        <div class="select_box">
                            <div class="aside_move_head">请选择</div>
                            <div class="aside_move_one"></div>
                            <div class="aside_move_head">请选择</div>
                            <div class="aside_move_two"></div>
                            <div class="aside_move_head">请选择</div>
                            <div class="aside_move_three"></div>
                        </div>
                        
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="http://zfj.city1000.cn/static/images/caiji/6.png" width="24" />
                        <span>
                            现场照片<strong>*</strong>
                        </span>
                    </dt>
                    <dd>
                        <!--上传节点-->
                        <div id="preview">
                            <img class="file_btn" border="0" width="100%" height="100%" src="http://zfj.city1000.cn/static/images/icon4.png" alt="点击上传">
                        </div>
                        <!--展示节点-->
                        <div id="preview_zs">
                            <img id="preview_zs_img" class="file_other" border="0" width="100%" height="100%" src="http://zfj.city1000.cn/static/images/icon4.png" alt="展示">
                        </div>
                        <input type="file" onchange="previewImage({file:this,imgBoxId:'preview_zs',imgId:'preview_zs_img',width:'310'})" class="fileImgButton"  name="photo" accept="image/*" />
                        <!-- capture="camera"-->
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="http://zfj.city1000.cn/static/images/caiji/3.png" width="24" />
                        <span>
                            描述
                        </span>
                    </dt>
                    <dd>
                        <textarea name="discription" placeholder="请输入投诉/举报/意见建议内容"></textarea>
                    </dd>
                </dl>
                <div class="subBox">
                    <input type="submit" value="确认案件" style="display: none;" id="submit" />
                    <div id="submit_" class="layui-btn layui-btn-danger layui-btn-fluid" _key="0">点击提交</div>
                </div>
                <!--form end-->
                </form>
            </div>
        </div>
        
        <script>
            layui.use(['form', 'layedit', 'laydate'], function(){
                var form = layui.form
                ,layer = layui.layer
                ,layedit = layui.layedit
                ,laydate = layui.laydate;
            });

            // 获取code
            var url_code = url_canshu('code');

            // 解析openid
            $.ajax({
                url: "http://api.city1000.cn:9999/weixin/wechat/mp/oauth2getAccessToken",
                type: "get",
                dataType: 'json',
                data: {
                    "code": url_code
                },
                success: function(res){
                    console.log(res.data);
                    if(res.code != 0){
                        tc_tiaozhuan("网络错误", "点击刷新", "http://api.city1000.cn:9999/weixin/wechat/api/redirect?url=http://hesuan.city1000.cn/zhifaju_shimin/create.html");
                    }else{
                        $("input[name='openid']").val(res.data.openId);
                    }
                    
                },
                error: function(err){
                    layer.msg("提交失败"+"："+err);
                    console.log(err);
                }
            });

            // 点击上传图片时触发file
            $("#preview").click(function(){
                $(".fileImgButton").click();
            });
            $("#preview_zs").click(function(){
                $(".fileImgButton").click();
            });
            //图片上传预览
            function previewImage(json)
            {
                var div = document.getElementById(json.imgBoxId);
                if (json.file.files && json.file.files[0])
                {
                    div.innerHTML ='<img id='+json.imgId+'>';
                    var img = document.getElementById(json.imgId);
                    img.width=json.width;
                    var reader = new FileReader();
                    reader.onload = function(evt){img.src = evt.target.result;}
                    reader.readAsDataURL(json.file.files[0]);

                    $("#preview").hide();
                    $("#preview_zs").show();
                    $(".subBox").show();
                    
                }
            }
            $(function(){
                var url = "http://zfj.city1000.cn";
                /*column statr*/
                var aside_move_one = $(".aside_move_one")
                /*第一级选项*/
                $.ajax({
                    url: url+"/wx/h5/shimin/post/get/two",
                    type: "get",
                    dataType: 'json',
                    data: {},
                    success: function(res){

                        console.log(res);
                        var res = res.son;
                        for(var i=0; i<res.length; i++){
                            var html = "<label class='no_img'><input type='radio' name='column_son' value='"+res[i].id+"' /><span>"+res[i].name+"</span></label>";
                            aside_move_one.append(html);
                        }

                        /*二三级分类 start*/
                        var head = $(".aside_move_head");
                        head.hide();
                        head.eq(0).show();
                        var column_son = $("input[name='column_son']");
                        var aside_move_two = $(".aside_move_two");
                        var aside_move_three = $(".aside_move_three");
                        column_son.change(function(){
                            
                            // console.log("大类"+$(this).val())
                            $(this).parent().addClass("ac").siblings().removeClass("ac");

                            var son_id = $(this).val();
                           
                            aside_move_two.html("");
                            aside_move_three.html("");
                            head.eq(2).hide();
                            aside_move_three.hide();
                            $.ajax({
                                url: url+"/wx/h5/shimin/post/get/three/"+son_id,
                                type: "get",
                                dataType: 'json',
                                data: {},
                                success: function(res){


                                    console.log(res);
                                    var db = res.grandson;
                                    head.eq(1).show();
                                    
                                    for(var i=0; i<db.length; i++){
                                        
                                        var html = "<label><input type='radio' name='column_grandson' value='"+db[i].id+"' /><span>"+db[i].name+"</span></label>";
                                        aside_move_two.append(html);
                                    }

                                    // 获取区域
                                    var column_grandson = $("input[name='column_grandson']");
                                    column_grandson.change(function(){

                                        $(this).parent().addClass("ac").siblings().removeClass("ac");
                                        console.log("三级分类id"+$(this).val())
                                        var grandson_id = $(this).val();
                                        
                                        aside_move_three.html("");

                                        $.ajax({
                                            url: url+"/wx/h5/shimin/post/get/section/"+grandson_id,
                                            type: "get",
                                            dataType: 'json',
                                            data: {},
                                            success: function(res){

                                                console.log(res);

                                                // 如果只有一个区域
                                                if(res.length <= 1){
                                                    var html = "<label class='no_img'><input type='radio' name='section_son' value='"+res[0].id+"' checked /><span>"+res[0].name+"</span></label>";
                                                    aside_move_three.append(html);
                                                    aside_move_three.hide();
                                                    head.eq(2).hide()
                                                }else{
                                                    if(res.length > 6){
                                                        for(var i=0; i<res.length; i++){
                                                            
                                                            var html = "<label class='no_img'><input type='radio' name='section_son' value='"+res[i].id+"' /><span>"+res[i].name+"</span></label>";
                                                            aside_move_three.append(html);
                                                        }
                                                    }else if(res.length >= 4){
                                                        for(var i=0; i<res.length; i++){
                                                            
                                                            var html = "<label class='p img_"+res[i].id+"'><span></span><img src='http://zfj.city1000.cn/static/images/map/"+res[i].id+".jpg' /><input type='radio' name='section_son' value='"+res[i].id+"' /></label>";
                                                            aside_move_three.append(html);
                                                            
                                                            head.eq(2).html("请点击选择区域");
                                                        }
                                                    }else{
                                                        for(var i=0; i<res.length; i++){
                                                            
                                                            var html = "<label class='no_img'><input type='radio' name='section_son' value='"+res[i].id+"' /><span>"+res[i].name+"</span></label>";
                                                            aside_move_three.append(html);
                                                        }
                                                        
                                                    }

                                                    head.eq(2).show();
                                                    aside_move_three.show();
                                                }
                                                
                                                var section_son = $("input[name='section_son']");
                                                section_son.change(function(){
                                                    $(this).parent().addClass("ac").siblings().removeClass("ac");
                                                    console.log("科室id"+$(this).val())
            
                                                });
                                            },
                                            error: function(err){
                                                layer.msg("提交失败"+"："+err);
                                                console.log(err);
                                            }
                                        });
                                    });
                                },
                                error: function(err){
                                    layer.msg("提交失败"+"："+err);
                                    console.log(err);
                                }
                            });
                        });
                        /*二三级分类 end*/
                    },
                    error: function(err){
                        layer.msg("提交失败"+"："+err);
                        console.log(err);
                    }
                });
                
                /*column end*/
                

                // 案件处理
                var sub = $("#submit_");
                sub.click(function(){
                    var ts = $(this);
                    
                    var time = $("input[name='time']").val();
                    var source = $("input[name='source']").val();
                    var discription = $("textarea[name='discription']").val();
                    var dizhi = $("input[name='dizhi']").val();
                    // var three = $("#three");
                    // var four = $("#four");
                    var grandson_id = $("input[name='column_grandson']:checked").val();
                    var section_son_id = $("input[name='section_son']:checked").val();

                    var file = $("input[name='photo']");

                    if(ts.attr("_key") == 0){
                        ts.attr("_key", 1);
     
                        if(time == ""){
                            layer.msg("时间不能为空")
                            ts.attr("_key", 0);
                        }else if(source == ""){
                            layer.msg("来源不能为空")
                            ts.attr("_key", 0);
                        }else if(dizhi == ""){
                            layer.msg("请填写详细地址");
                            ts.attr("_key", 0);
                        }else if(grandson_id == "" || grandson_id == null){
                            
                                layer.msg("请选择分类");
                                ts.attr("_key", 0);
                            
                        }else if(section_son_id == "" || section_son_id == null){
                            
                            layer.msg("请选择区域");
                            ts.attr("_key", 0);

                        }else if(file.val() == ""){
                            layer.msg("请上传图片");
                            $(this).attr("_key", 0);
                        }else{

                            console.log(section_son_id)
                            layer.msg("提交中",{
                                icon: 16,
                                time: 100000
                            });
                            $("#submit").click();
                        }
                    }
                    
                })

                $("#auto_dizhi").click(function(){
                    // 获取地理位置
                    $.ajax({
                        url: url+"/wx/h5/task/member/post/get/sdk",
                        type: "POST",
                        data:{
                            'url': window.location.href
                        },
                        dataType: "json",
                        success: function (result) {
                            console.log(result)
                            wx.config({
                                // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                                debug: false,
                                // 必填，公众号的唯一标识
                                appId: result.appid,
                                // 必填，生成签名的时间戳
                                timestamp: "" + result.timestamp,
                                // 必填，生成签名的随机串timestamp
                                nonceStr: result.nonceStr,
                                // 必填，签名，见附录1
                                signature: result.signature,
                                // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                                jsApiList: ['checkJsApi', 'getLocation']
                            });
                            wx.error(function (res) {
                                alert("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
                            });
                            // 获取地理位置
                            wx.getLocation({
                                type: 'gcj02',
                                success: function (res) {
                                    // 纬度
                                    var latitude = res.latitude;
                                    // 经度
                                    var longitude = res.longitude;

                                    // 请求地址
                                    $.ajax({
                                        url: url+"/wx/h5/task/member/post/get/dizhi",
                                        type: "POST",
                                        data:{
                                            'latitude': latitude,
                                            'longitude': longitude
                                        },
                                        dataType: "json",
                                        success: function (data) {
                                            console.log("--展示节点----")
                                            console.log(data.result.address)
                                            var dizhi1 = data.result.address;
                                            var dizhi2 = data.result.address_component.district;
                                            var dizhi3 = data.result.formatted_addresses.recommend;
                                            $("#dizhi").val(dizhi2+dizhi3);
                                        }
                                    })

                                    console.log(geocoder(latitude, longitude));
                                },
                                cancel: function (res) {
                                    console.log('用户拒绝授权');
                                }
                            });
                        }
                    })
                })
                
            
            });
        </script>
    </body>
</html>

            

       